export const createAnimate = (right, bottom) => {
  const TeakIcon = document.createElement('div');
  TeakIcon.style.position = 'absolute';
  TeakIcon.style.right = right + 'px';
  TeakIcon.style.bottom = bottom + 'px';
  TeakIcon.style.width = '50px';
  TeakIcon.style.height = '50px';
  TeakIcon.style.backgroundImage = `url(${require('@/assets/images/components/bg-material.png')})`;
  TeakIcon.style.transition =
    'right 1s ease-in, bottom 1s cubic-bezier(0.5, -0.5, 1, 1),transform 1s ease-in, opacity 1s ease-in';

  document.body.appendChild(TeakIcon);
  // 添加动画属性
  setTimeout(() => {
    TeakIcon.style.right = 0 + 'px';
    TeakIcon.style.bottom = 96 + 'px';
    TeakIcon.style.opacity = 0.4;
    TeakIcon.style.transform = 'scale(0.2)';
  }, 0);

  /**
   * 动画结束后，删除自己
   */
  TeakIcon.ontransitionend = function () {
    this.remove();
  };
};
